<template>
  <div>
    <div class="tp">环境监测</div>
    <div class="da">
      <div class="daa">
        <div class="tq">
          <span class="a1">{{ du }}°C</span>
          <span class="aa">晴</span>
          <span class="a2">47优</span>
          <span class="a3">24~36°C</span>
        </div>
      </div>
      <!-- 黄色预警 -->
      <div class="yuan"></div>
      <div class="huang">高温黄色预警</div>
      <!-- 体感风力温度 -->
      <div class="cc">
        <div class="ti">
          <p>
            <img src="../assets//images2/tiganwendu.png" alt="" />
            <span style="color: #fff; font-size: 12px; margin-left: 10px" class="wen2">体感</span>
            <span style="color: #fff; margin-left: 200px" class="wen1">{{ wendu }}°C</span>
          </p>
        </div>
        <div class="feng">
          <p>
            <img src="../assets//images2/fengli.png" alt="" />
            <span style="color: #fff; font-size: 12px; margin-left: 10px">风力</span>
            <span style="color: #fff; margin-left: 180px" class="feng1">{{ fengli }}1级</span>
          </p>
        </div>
        <div class="shi">
          <p>
            <img src="../assets//images2/shidu.png" alt=""  class="shi3"/>
            <span style="color: #fff; font-size: 12px; margin-left: 10px" class="shi2">湿度</span>
            <span style="color: #fff; margin-left: 200px" class="shi1">34%</span>
          </p>
        </div>
      </div>

      <!-- 天气 -->
      <div class="tianqi">
        <div class="tlef">
          <div class="xiao">
            <p class="tlef1">24~36°C <img src="../assets//images2/qing.png" alt="" /></p>
            <p class="tlef2">今天<span class="qing">47优</span><span class="qing1">晴</span></p>
          </div>
        </div>
        <div class="trig">
          <div class="xiao1">
            <p class="tlef1">22~38°C <img src="../assets//images2/qing.png" alt="" /></p>
            <p class="tlef2">明天<span class="qing">47优</span><span class="qing1">晴</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { getweather } from '../request/index'

export default {
  props: {},
  setup() {
    const du = ref()
    const fengli = ref()
    const wendu = ref()

    // getweather().then((res) => {
    //   console.log(res)
    //   du.value = res.data.tem1
    //   fengli.value = res.data.win_speed
    //   wendu.value = res.data.tem2
    // })
    return {
      du,
      fengli,
      wendu
    }
  }
}
</script>

<style>
.lef {
  /* position: absolute;
  left: 0;
  top: 0; */
  width: 39%;
  background: url('../assets/images2/Left.png') no-repeat;
  /* z-index: 11; */
  background-size: 100% 100%;
}

.cen {
  width: 727px;
  height: 729px;
  background: url('../assets//images2/pageBg.png');
  background-size: 100% 100%;
}
.rig {
  width: 37%;
  background: url('../assets//images2/Right.png') no-repeat;
  background-size: 100% 100%;
}

.tp {
  width: 21%;
  height: 38px;
  /* height: 10px; */
  background: url('../assets//images2/titlebg.png');
  background-size: 100% 100%;
  position: absolute;
  left: 50px;
  top: 70px;
  color: #fff;
  line-height: 38px;
  padding-left: 30px;
}
.da {
  width: 340px;
  height: 290px;
  background-color: #0c1d5f;
  margin-top: 120px;
  margin-left: 50px;
}
.daa {
  width: 325px;
  height: 60px;
  /* background-color: pink; */
  position: absolute;
}
.tq {
  width: 214px;
  height: 44px;
  padding-top: 10px;
  position: absolute;
  /* background-color: pink; */
}
.a1 {
  font-size: 40px;
  color: #fff;
  margin-left: 20px;
}
.aa {
  font-size: 12px;
  position: relative;
  left: 20px;
  top: -25px;
  color: #fff;
}
.a2 {
  background-color: green;
  color: #fff;
  border-radius: 30px;
  font-size: 10px;
  display: block;
  width: 30px;
  height: 16px;
  padding-left: 10px;
  position: relative;
  left: 150px;
  top: -53px;
}
.a3 {
  font-size: 12px;
  color: #fff;
  position: relative;
  left: 130px;
  top: -50px;
}
/* 黄色预警 */
.yuan {
  border-radius: 50%;
  background-color: orange;
  width: 15px;
  height: 15px;
  margin-left: 230px;
  margin-top: 10px;
  position: relative;
  top: 14px;
}
.huang {
  color: orange;
  margin-left: 250px;
  font-size: 12px;
}
/* <!-- 体感风力温度 --> */
.cc {
  width: 325px;
  height: 140px;
  /* background-color: #2F558F; */
  margin-top: 40px;
  margin-left: 10px;
  border: 1px solid #2f558f;
}
.ti {
  width: 300px;
  height: 30px;
  border-bottom: 1px solid blue;
  margin-left: 15px;
  padding-top: 15px;
  /* background-color: red; */
}
.ti p {
  width: 300px;
  height: 46px;
  /* background-color: pink; */
  line-height: 46px;
  margin-top: -15px;
  position: absolute;
}
.ti p .wen1 {
  position: relative;
  top:-90px;
}
.ti p .wen2 {
  position: relative;
  /* background-color: red; */
  width: 40px;
  display: block;
  top: -45px;
  left: 20px;
}
.feng {
  width: 300px;
  height: 30px;
  border-bottom: 1px solid blue;
  margin-left: 15px;
  margin-top: 15px;
  position: absolute;
}
.feng1{
    position: relative;
    top: -35px;
    left: 23px;
}
.shi {
  width: 300px;
  height: 30px;
  margin-left: 15px;
  margin-top: 15px;
  position: absolute;
}
.shi2{
  position: relative;
  top: 40px;
  
}
.shi1{
  position: relative;
  top: 15px;
  left: -10px;
}
.shi3{
  position: relative;
   top: 40px;
}
/* 天气 */
.tianqi {
  width: 325px;
  height: 60px;
  border: 1px, solid, #2f558f;
  margin-top: 10px;
  margin-left: 10px;
}

.tlef {
  width: 150px;
  height: 60px;
  /* background-color: rgb(52, 52, 47); */
  color: #fff;
  float: left;
}
.trig {
  width: 150px;
  height: 60px;
  /* background-color: rgb(52, 52, 47); */
  color: #fff;
  float: left;
}
.xiao {
  width: 150px;
  height: 40px;
  /* background-color: red; */
  margin-top: 10px;
  border-right: 1px solid blue;
}
.xiao1 {
  width: 150px;
  height: 40px;
  /* background-color: red; */
  margin-top: 10px;
  margin-left: 10px;
}
.tlef1 {
  width: 150px;
  height: 30px;
  font-size: 16px;
  /* background-color: red; */
  margin: 0;
  padding: 0;
  margin-left: 15px;
  line-height: 20px;
}
.tlef1 img {
  margin-left: 26px;
}
.tlef2 {
  width: 150px;
  height: 30px;
  font-size: 16px;
  /* background-color: pink; */
  margin: 0;
  padding: 0;
  margin-left: 15px;
  margin-top: -5px;
}
.qing {
  border-radius: 30px;
  background-color: green;
  width: 35px;
  font-size: 12px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 20px;
  text-align: center;
}

</style>
